<template>
  <div class="box">
    <div class="container">
      <div class="search-box">
        <div class="search-top-box" :style="moreSearchShow ? 'height:200px;overflow-y:auto' : ''">
          <div class="search-top-left-box">
            <el-form ref="div" :inline="true" :model="formSearch" @submit.native.prevent class="demo-form-inline">
              <el-form-item label="关键词">
                <el-input @change="onSearch" clearable class="form-width" v-model="formSearch.keyword"
                  placeholder="关键词搜索"></el-input>
              </el-form-item>
              <el-form-item label="客户">
                <el-select filterable @change="onSearch" clearable class="form-width" v-model="formSearch.user_id"
                  placeholder="请选择客户">
                  <el-option v-for="(item, index) in customerList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="归属品牌">
                <el-select @change="onSearch" filterable clearable class="form-width" v-model="formSearch.brand_id"
                  placeholder="请选择归属客户">
                  <el-option v-for="(item, index) in brandList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="施工进度">
                <el-select filterable @change="onSearch" clearable class="form-width" v-model="formSearch.construction_progress"
                  placeholder="请选择项目进度">
                  <el-option v-for="(item, index) in constructionProgressList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理">
                <el-select filterable @change="onSearch" clearable class="form-width"
                  v-model="formSearch.account_manager_id" placeholder="请选择客户经理">
                  <el-option v-for="(item, index) in accountManagerList" :key="item.id" :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工程经理">
                <el-select filterable @change="onSearch" clearable class="form-width"
                  v-model="formSearch.engineering_manager_id" placeholder="请选择工程经理">
                  <el-option v-for="(item, index) in engineeringManagerList" :key="item.id" :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="search-top-right-box">
            <p v-if="showOpne" @click="moreSearch">
              {{ moreSearchShow ? "收起" : "展开"
              }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                "></i>
            </p>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </div>
        </div>
      </div>
      <!-- table -->
      <div class="table-box" :style="moreSearchShow ? 'height:calc(100% - 219px);' : ''" v-loading="pageLoading">
        <el-table :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData" style="width: 100%"
          v-loading="tableLoading">
          <el-table-column prop="project_number" label="项目编号" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" @click="goToDetail(scope.row)">{{
                scope.row.project_number
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="project_name" label="项目名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="project_type" label="项目类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <p v-if="scope.row.project_type == 1">新店</p>
              <p v-if="scope.row.project_type == 2">改造店</p>
              <p v-if="scope.row.project_type == 3">翻新店</p>
              <p v-if="scope.row.project_type == 4">特批新店</p>
              <p v-if="scope.row.project_type == 5">特批改造店</p>
              <p v-if="scope.row.project_type == 6">现场对接店</p>
            </template>
          </el-table-column>
          <el-table-column prop="customer_name" label="客户" show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column prop="source" label="来源" show-overflow-tooltip>
            <template slot-scope="scope">
              <p>{{ scope.row.source == 1 ? '小程序创建' : '后台创建' }}</p>
            </template>
          </el-table-column> -->
          <el-table-column prop="address" label="项目状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="flex ac jc">
                <p v-if="scope.row.display_status == 40">已签约</p>
                <p v-if="scope.row.display_status == 42">待进场</p>
                <p v-if="scope.row.display_status == 45">施工中</p>
                <p v-if="scope.row.display_status == 50">已完工</p>
                <p v-if="scope.row.display_status == 55">待结算</p>
                <p v-if="scope.row.display_status == 60">款项付清</p>
                <p v-if="scope.row.display_status == 70">项目取消</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="source" label="进度描述" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ speedDesc(1, scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button v-if="userInfo.position_id == 10 && scope.row.status == 1500" type="text"
                @click="delProjectFunc(scope.row)">删除项目</el-button>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
      @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import adminApi from "@/api/adminApi";
import projectApi from "@/api/projectApi";
import commonApi from "@/api/common";
import brandApi from "@/api/brandApi";
import { getUserInfo } from "@/utils/auth";
import { handleSpeedDesc } from "@/views/home/components/kj.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      tableLoading: false,
      page: 1,
      tableData: [],
      formSearch: {
        construction_progress: "",
        engineering_manager_id: "",
        account_manager_id: "",
        brand_id: "",
        province_id: "",
        city_id: "",
        user_id: "",
        keyword: "",
      },
      moreSearchShow: false,
      showOpne: false,
      page: 1,
      num: 10,
      total: 0,
      addLoading: false,
      project_id: "",
      HtmlAuthority: {
        project_getProjectInfo: false,
        project_projectAdd: false,
        project_projectDel: false,
      },
      constructionProgressList: [
        {
          label: "待进场",
          value: 10,
        },
        {
          label: "施工中",
          value: 20,
        },
        {
          label: "一次预警",
          value: 30,
        },
        {
          label: "二次预警",
          value: 40,
        },
        {
          label: "已超期",
          value: 50,
        },
        {
          label: "停工中",
          value: 60,
        },
        {
          label: "已完工",
          value: 70,
        },
      ],
      brandList: [], //品牌列表
      accountManagerList: [], //客户经理
      engineeringManagerList: [], //工程经理
      customerList: [], //客户
      pageLoading: false,
      userInfo: {}
    };
  },
  watch: {},
  computed: {
    speedDesc() {
      return (type, item) => {
        return handleSpeedDesc(type, item, this.userInfo);
      };
    },
  },
  activated() {
    // if (this.$store.state.catchList != '/project/projectDetail') {
    //   this.formSearch = {
    //     project_num: '',
    //     client_id: '',
    //     principal_id: '',
    //     progress: '',
    //     title: '',
    //     type_id: ''
    //   }
    //   this.tableData = [];
    //   this.total = 0;
    //   this.page = 1;
    //   this.$once('hook:beforeDestroy', function () {
    //     window.onresize = null;
    //   })
    //   this.onresize(); //监听搜索容器变化
    //   window.onresize = () => {
    //     this.onresize(); //监听搜索容器变化
    //   }
    // }
  },
  destroyed() {
    window.onresize = null;
  },
  mounted() {
    this.userInfo = getUserInfo();

    if (this.$route.query.construction_progress) {
      this.formSearch.construction_progress =
        this.$route.query.construction_progress;
    }
    this.$once("hook:beforeDestroy", function () {
      window.onresize = null;
    });
    this.onresize(); //监听搜索容器变化
    window.onresize = () => {
      this.onresize(); //监听搜索容器变化
    };
    this.getProjectList();
    this.getBrandList();
    this.get_account_manager();
    this.get_engineering_manager();
    this.get_customer();
    this.$nextTick(() => {
      let url = this.getnewurl();
      window.history.replaceState(null, null, url);
    });
  },
  methods: {
    // 删除项目
    delProjectFunc(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delProject(row.id);
        })
        .catch(() => { });
    },
    // 删除项目请求
    delProject(project_id) {
      projectApi
        .delProject({ project_id, remark: "" })
        .then((res) => {
          console.log(res, "删除项目");
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getProjectList();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    getnewurl() {
      let url = document.location.href;
      let reg = /[^\w](id)=?([^&|^#]*)/g;
      url = url.replace(reg, "");
      reg = /&&/g;
      url = url.replace(reg, "");
      reg = /&#/g;
      url = url.replace(reg, "#");
      reg = /\?#/g;
      url = url.replace(reg, "#");
      // url = url.replaceAll(document.domain,"");
      // url = url.replaceAll("http://","");
      // url = url.replaceAll("https://","");
      reg = /\?#/g;
      url = url.replace(reg, "#");
      return url;
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.page = 1;
      this.getProjectList();
    },
    // 页面权限
    getHtmlAuthority() {
      commonApi
        .getHtmlAuthority({
          path: this.$route.path,
        })
        .then((res) => {
          console.log(res, "页面权限");
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
    },
    // 搜索
    onSearch() {
      this.page = 1;
      this.getProjectList();
    },
    // 翻页
    handleCurrentChange(page) {
      this.page = page;
      this.getProjectList();
    },
    onresize() {
      let inter = "";
      clearTimeout(inter);
      inter = setTimeout(() => {
        if (!this.$refs.div) return;
        let height = this.$refs.div.$el.offsetHeight;
        height > 70 ? (this.showOpne = true) : (this.showOpne = false);
        this.moreSearchShow = false;
      }, 1000);
    },
    moreSearch() {
      this.moreSearchShow = !this.moreSearchShow;
    },
    // 项目列表
    getProjectList() {
      let formSearch = this.formSearch;
      this.pageLoading = true;
      projectApi
        .getProjectList({
          page: this.page,
          num: this.num,
          construction_progress: formSearch.construction_progress,
          engineering_manager_id: formSearch.engineering_manager_id,
          account_manager_id: formSearch.account_manager_id,
          brand_id: formSearch.brand_id,
          province_id: formSearch.province_id,
          city_id: formSearch.city_id,
          user_id: formSearch.user_id,
          keyword: formSearch.keyword,
          greater_status: 1,
        })
        .then((res) => {
          console.log(res, "项目列表");
          this.pageLoading = false;
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.max;
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch((err) => {
          this.pageLoading = false;
          this.$message.warning(err.message);
        });
    },
    // 项目详情
    goToDetail(row) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({ path: "/project_", query: { id: row.id } });
    },
    // 品牌列表
    getBrandList() {
      brandApi
        .getBrandList({
          page: 1,
          num: 9999,
          keyword: "",
        })
        .then((res) => {
          console.log(res, "品牌列表");
          if (res.code == 200) {
            this.brandList = res.data.list;
          }
        })
        .catch(() => { });
    },
    // 客户经理
    get_account_manager() {
      var obj = {
        page: 1,
        num: 9999,
        keyword: "",
        province_id: "",
        city_id: "",
        county_id: "",
        identity: 1,
        position_id_arr: [2],
      };
      adminApi
        .getAdminList(obj)
        .then((res) => {
          console.log(res, "客户经理");
          if (res.code == 200) {
            this.accountManagerList = res.data.list;
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => { });
    },
    // 客户经理
    get_engineering_manager() {
      var obj = {
        page: 1,
        num: 9999,
        keyword: "",
        province_id: "",
        city_id: "",
        county_id: "",
        identity: 2,
        position_id_arr: [7],
      };
      adminApi
        .getAdminList(obj)
        .then((res) => {
          console.log(res, "工程经理");
          if (res.code == 200) {
            this.engineeringManagerList = res.data.list;
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => { });
    },
    // 客户
    get_customer() {
      var obj = {
        page: 1,
        num: 9999,
        keyword: "",
        province_id: "",
        city_id: "",
        county_id: "",
        identity: 4,
      };
      adminApi
        .getUserList(obj)
        .then((res) => {
          console.log(res, "客户");
          if (res.code == 200) {
            this.customerList = res.data.list;
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => { });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>